<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>奇物收藏馆 - 图鉴养成系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }

        body {
          font-family: 'HarmonyOS Sans', '微软雅黑', Arial, sans-serif;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          min-height: 100vh;
          color: #333;
          overflow-x: hidden;
        }

        .container {
          max-width: 1200px;
          margin: 0 auto;
          padding: 20px;
        }

        .header {
          text-align: center;
          margin-bottom: 40px;
          color: white;
        }

        .header h1 {
          font-size: 2.5rem;
          margin-bottom: 10px;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
          font-size: 1.1rem;
          opacity: 0.9;
        }

        .feature-tabs {
          display: flex;
          justify-content: center;
          gap: 20px;
          margin-bottom: 30px;
        }

        .tab-btn {
          background: rgba(255, 255, 255, 0.2);
          border: none;
          color: white;
          padding: 12px 24px;
          border-radius: 25px;
          cursor: pointer;
          font-size: 1rem;
          font-weight: 500;
          transition: all 0.3s;
          backdrop-filter: blur(10px);
        }

        .tab-btn.active {
          background: rgba(255, 255, 255, 0.3);
          transform: scale(1.05);
        }

        .tab-btn:hover {
          background: rgba(255, 255, 255, 0.25);
        }

        .tab-content {
          display: none;
          animation: fadeIn 0.5s ease-in-out;
        }

        .tab-content.active {
          display: block;
        }

        @keyframes fadeIn {
          from { opacity: 0; transform: translateY(20px); }
          to { opacity: 1; transform: translateY(0); }
        }

        .card {
          background: rgba(255, 255, 255, 0.95);
          border-radius: 20px;
          padding: 25px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.2);
          backdrop-filter: blur(10px);
          margin-bottom: 30px;
          transition: all 0.3s ease;
        }

        .card:hover {
          transform: translateY(-5px);
          box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }

        .card-title {
          font-size: 1.4rem;
          font-weight: bold;
          margin-bottom: 20px;
          color: #333;
          display: flex;
          align-items: center;
          gap: 10px;
        }

        /* 生态沙盒样式 */
        .ecosystem-area {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          border-radius: 25px;
          padding: 30px;
          margin-bottom: 30px;
          position: relative;
          overflow: hidden;
          box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }

        .ecosystem-canvas {
          width: 100%;
          height: 400px;
          background: 
            linear-gradient(to bottom, 
              rgba(135, 206, 235, 0.8) 0%, 
              rgba(144, 238, 144, 0.6) 50%,
              rgba(34, 139, 34, 0.4) 100%
            ),
            radial-gradient(ellipse at center bottom, 
              rgba(255, 255, 255, 0.1) 0%, 
              transparent 70%
            );
          border-radius: 25px;
          position: relative;
          cursor: pointer;
          border: 4px solid rgba(255,255,255,0.4);
          box-shadow: 
            inset 0 8px 20px rgba(0,0,0,0.15),
            0 0 30px rgba(0, 150, 255, 0.3);
          overflow: hidden;
        }

        .ecosystem-canvas::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: 
            /* 气泡效果 */
            radial-gradient(circle at 20% 20%, rgba(255,255,255,0.3) 2px, transparent 2px),
            radial-gradient(circle at 80% 40%, rgba(255,255,255,0.2) 1px, transparent 1px),
            radial-gradient(circle at 40% 80%, rgba(255,255,255,0.25) 1.5px, transparent 1.5px),
            radial-gradient(circle at 60% 60%, rgba(255,255,255,0.15) 1px, transparent 1px),
            radial-gradient(circle at 10% 70%, rgba(255,255,255,0.2) 1px, transparent 1px),
            radial-gradient(circle at 90% 10%, rgba(255,255,255,0.3) 2px, transparent 2px),
            /* 水波纹效果 */
            repeating-linear-gradient(
              45deg,
              transparent,
              transparent 10px,
              rgba(255, 255, 255, 0.05) 10px,
              rgba(255, 255, 255, 0.05) 20px
            );
          background-size: 
            100px 100px, 
            80px 80px, 
            120px 120px, 
            90px 90px,
            70px 70px,
            110px 110px,
            40px 40px;
          animation: float 20s linear infinite;
          pointer-events: none;
        }

        .ecosystem-canvas::after {
          content: '';
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          height: 60px;
          background: 
            linear-gradient(to top, 
              rgba(139, 69, 19, 0.6) 0%, 
              rgba(160, 82, 45, 0.4) 50%,
              transparent 100%
            );
          border-radius: 0 0 25px 25px;
          pointer-events: none;
        }

        /* 生态缸装饰元素 */
        .ecosystem-canvas .decoration {
          position: absolute;
          pointer-events: none;
          z-index: 1;
        }

        .ecosystem-canvas .pebble {
          width: 8px;
          height: 8px;
          background: rgba(169, 169, 169, 0.6);
          border-radius: 50%;
          position: absolute;
          bottom: 10px;
        }

        .ecosystem-canvas .algae {
          width: 3px;
          height: 20px;
          background: linear-gradient(to top, rgba(34, 139, 34, 0.8), transparent);
          position: absolute;
          bottom: 0;
          border-radius: 2px 2px 0 0;
        }

        .ecosystem-canvas .bubble {
          width: 4px;
          height: 4px;
          background: rgba(255, 255, 255, 0.4);
          border-radius: 50%;
          position: absolute;
          animation: bubbleRise 3s linear infinite;
        }

        @keyframes bubbleRise {
          0% {
            transform: translateY(400px);
            opacity: 0;
          }
          10% {
            opacity: 1;
          }
          90% {
            opacity: 1;
          }
          100% {
            transform: translateY(-20px);
            opacity: 0;
          }
        }

        @keyframes float {
          0% { transform: translateY(0px); }
          50% { transform: translateY(-10px); }
          100% { transform: translateY(0px); }
        }

        .ecosystem-controls {
          display: flex;
          justify-content: center;
          gap: 15px;
          margin-top: 25px;
          flex-wrap: wrap;
        }

        .eco-btn {
          background: rgba(255,255,255,0.2);
          border: 2px solid rgba(255,255,255,0.3);
          color: white;
          padding: 12px 24px;
          border-radius: 25px;
          cursor: pointer;
          font-size: 1.1rem;
          font-weight: 600;
          transition: all 0.3s;
          backdrop-filter: blur(10px);
          position: relative;
          overflow: hidden;
        }

        .eco-btn::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
          transition: left 0.5s;
        }

        .eco-btn:hover::before {
          left: 100%;
        }

        .eco-btn:hover {
          background: rgba(255,255,255,0.3);
          transform: scale(1.05);
          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .eco-btn:active {
          transform: scale(0.95);
        }

        .eco-btn.cooldown {
          opacity: 0.5;
          cursor: not-allowed;
        }

        .plant {
          position: absolute;
          font-size: 2.5rem;
          transition: all 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
          animation: grow 3s ease-in-out;
          filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
        }

        .plant:hover {
          transform: scale(1.2);
          filter: drop-shadow(0 8px 16px rgba(0,0,0,0.4));
        }

        @keyframes grow {
          0% { 
            transform: scale(0); 
            opacity: 0;
          }
          50% { 
            transform: scale(1.3); 
            opacity: 0.8;
          }
          100% { 
            transform: scale(1); 
            opacity: 1;
          }
        }

        /* 天气效果 */
        .weather-effect {
          position: absolute;
          pointer-events: none;
          z-index: 10;
        }

        .rain {
          position: absolute;
          width: 2px;
          height: 20px;
          background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.8));
          animation: rain 1s linear infinite;
        }

        @keyframes rain {
          0% { transform: translateY(-20px); opacity: 0; }
          10% { opacity: 1; }
          100% { transform: translateY(400px); opacity: 0; }
        }

        .snow {
          position: absolute;
          width: 6px;
          height: 6px;
          background: white;
          border-radius: 50%;
          animation: snow 3s linear infinite;
        }

        @keyframes snow {
          0% { transform: translateY(-10px) rotate(0deg); opacity: 0; }
          10% { opacity: 1; }
          100% { transform: translateY(400px) rotate(360deg); opacity: 0; }
        }

        /* 粒子效果 */
        .particle {
          position: absolute;
          width: 4px;
          height: 4px;
          background: #ffd700;
          border-radius: 50%;
          animation: particleFloat 2s ease-out forwards;
          pointer-events: none;
        }

        @keyframes particleFloat {
          0% {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
          100% {
            opacity: 0;
            transform: translateY(-50px) scale(0.5);
          }
        }

        /* 生态信息面板 */
        .ecosystem-info {
          background: rgba(255,255,255,0.1);
          border-radius: 15px;
          padding: 15px;
          margin-top: 20px;
          color: white;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.2);
        }

        .ecosystem-stats {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 10px;
          margin-bottom: 10px;
        }

        .eco-stat {
          text-align: center;
          padding: 8px;
          background: rgba(255,255,255,0.1);
          border-radius: 10px;
        }

        .eco-stat-value {
          font-size: 1.2rem;
          font-weight: bold;
          margin-bottom: 2px;
        }

        .eco-stat-label {
          font-size: 0.8rem;
          opacity: 0.8;
        }

        /* 进化链展示 */
        .evolution-chain {
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          margin-top: 15px;
          flex-wrap: wrap;
        }

        .evolution-step {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .evolution-icon {
          font-size: 1.5rem;
          padding: 8px;
          background: rgba(255,255,255,0.2);
          border-radius: 50%;
          transition: all 0.3s;
        }

        .evolution-icon.completed {
          background: rgba(76, 175, 80, 0.3);
          animation: evolutionGlow 2s ease-in-out infinite alternate;
        }

        @keyframes evolutionGlow {
          0% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.3); }
          100% { box-shadow: 0 0 20px rgba(76, 175, 80, 0.6); }
        }

        .evolution-arrow {
          font-size: 1.2rem;
          color: rgba(255,255,255,0.6);
        }

        /* 特殊效果动画 */
        @keyframes sunshine {
          0% { opacity: 0; transform: scale(0); }
          50% { opacity: 1; transform: scale(1); }
          100% { opacity: 0; transform: scale(0); }
        }

        @keyframes ripple {
          0% { transform: scale(0); opacity: 1; }
          100% { transform: scale(3); opacity: 0; }
        }

        @keyframes wind {
          0% { transform: translateX(-50px); opacity: 0; }
          50% { opacity: 1; }
          100% { transform: translateX(100px); opacity: 0; }
        }

        @keyframes lightning {
          0% { opacity: 0; }
          50% { opacity: 1; }
          100% { opacity: 0; }
        }

        @keyframes sparkle {
          0% { opacity: 0; transform: scale(0); }
          50% { opacity: 1; transform: scale(1.5); }
          100% { opacity: 0; transform: scale(0); }
        }

        @keyframes cosmic {
          0% { opacity: 0; transform: scale(0); }
          50% { opacity: 1; transform: scale(1.5); }
          100% { opacity: 0; transform: scale(0); }
        }

        @keyframes storm {
          0% { opacity: 0; transform: scaleY(0); }
          50% { opacity: 1; transform: scaleY(1); }
          100% { opacity: 0; transform: scaleY(0); }
        }

        @keyframes crystal {
          0% { opacity: 0; transform: scale(0); }
          50% { opacity: 1; transform: scale(1.2); }
          100% { opacity: 0; transform: scale(0); }
        }

        @keyframes wave {
          0% { transform: translateX(-100px); opacity: 0; }
          50% { opacity: 1; }
          100% { transform: translateX(100px); opacity: 0; }
        }

        /* 盲盒图鉴样式 */
        .gacha-area {
          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          border-radius: 20px;
          padding: 25px;
          margin-bottom: 25px;
          box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .gacha-machine {
          width: 220px;
          height: 220px;
          margin: 0 auto 25px;
          background: linear-gradient(135deg, #ff6b6b, #feca57);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 4.5rem;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 15px 40px rgba(0,0,0,0.3);
          position: relative;
          overflow: hidden;
          border: 4px solid rgba(255,255,255,0.3);
        }

        .gacha-machine:hover {
          transform: scale(1.1);
          box-shadow: 0 15px 40px rgba(0,0,0,0.4);
        }

        .gacha-machine:active {
          transform: scale(0.95);
        }

        .gacha-machine::before {
          content: '';
          position: absolute;
          top: -50%;
          left: -50%;
          width: 200%;
          height: 200%;
          background: linear-gradient(45deg, transparent, rgba(255,255,255,0.3), transparent);
          animation: shine 2s infinite;
        }

        @keyframes shine {
          0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
          100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
        }

        .gacha-info {
          text-align: center;
          color: white;
          margin-bottom: 20px;
        }

        .gacha-cost {
          font-size: 1.2rem;
          font-weight: bold;
          margin-bottom: 10px;
        }

        .gacha-probability {
          font-size: 0.9rem;
          opacity: 0.8;
        }

        .collection-grid {
          display: grid;
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 15px;
          margin-top: 20px;
        }

        .collection-item {
          background: rgba(255,255,255,0.9);
          border-radius: 15px;
          padding: 15px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
          position: relative;
          overflow: hidden;
        }

        .collection-item:hover {
          transform: scale(1.05);
          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }

        .collection-item.rare {
          background: linear-gradient(135deg, #ffd700, #ffed4e);
        }

        .collection-item.legendary {
          background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
          animation: legendaryGlow 2s ease-in-out infinite alternate;
        }

        @keyframes legendaryGlow {
          0% { box-shadow: 0 0 10px rgba(255,107,107,0.5); }
          100% { box-shadow: 0 0 20px rgba(255,107,107,0.8); }
        }

        .collection-icon {
          font-size: 2.5rem;
          margin-bottom: 8px;
        }

        .collection-name {
          font-size: 0.9rem;
          font-weight: 500;
          color: #333;
        }

        .collection-rarity {
          font-size: 0.7rem;
          color: #666;
          margin-top: 5px;
        }

        /* 3D藏宝阁样式 */
        .treasure-gallery {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 20px;
          position: relative;
          overflow: hidden;
        }

        .gallery-viewer {
          width: 100%;
          height: 400px;
          background: rgba(255,255,255,0.1);
          border-radius: 15px;
          position: relative;
          perspective: 1000px;
          margin-bottom: 20px;
        }

        .gallery-stage {
          width: 100%;
          height: 100%;
          position: relative;
          transform-style: preserve-3d;
          transition: transform 0.5s ease;
        }

        .gallery-item {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background: rgba(255,255,255,0.9);
          border-radius: 15px;
          padding: 20px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s;
          box-shadow: 0 10px 30px rgba(0,0,0,0.2);
          min-width: 150px;
        }

        .gallery-item:hover {
          transform: translate(-50%, -50%) scale(1.1);
          box-shadow: 0 15px 40px rgba(0,0,0,0.3);
        }

        .gallery-icon {
          font-size: 3rem;
          margin-bottom: 10px;
        }

        .gallery-name {
          font-size: 1.1rem;
          font-weight: bold;
          color: #333;
          margin-bottom: 5px;
        }

        .gallery-desc {
          font-size: 0.9rem;
          color: #666;
        }

        .gallery-controls {
          display: flex;
          justify-content: center;
          gap: 15px;
          margin-top: 20px;
        }

        .gallery-btn {
          background: rgba(255,255,255,0.2);
          border: none;
          color: white;
          padding: 10px 20px;
          border-radius: 20px;
          cursor: pointer;
          font-size: 1rem;
          transition: all 0.3s;
        }

        .gallery-btn:hover {
          background: rgba(255,255,255,0.3);
        }

        .story-modal {
          position: fixed;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0,0,0,0.8);
          display: none;
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }

        .story-content {
          background: white;
          border-radius: 20px;
          padding: 30px;
          max-width: 500px;
          max-height: 80vh;
          overflow-y: auto;
          position: relative;
        }

        .story-close {
          position: absolute;
          top: 15px;
          right: 20px;
          background: none;
          border: none;
          font-size: 1.5rem;
          cursor: pointer;
          color: #666;
        }

        .story-title {
          font-size: 1.5rem;
          font-weight: bold;
          margin-bottom: 15px;
          color: #333;
        }

        .story-text {
          font-size: 1rem;
          line-height: 1.6;
          color: #666;
        }

        .notification {
          position: fixed;
          top: 20px;
          left: 50%;
          transform: translateX(-50%);
          background: rgba(255,255,255,0.95);
          color: #333;
          padding: 15px 25px;
          border-radius: 25px;
          box-shadow: 0 5px 15px rgba(0,0,0,0.2);
          z-index: 1000;
          opacity: 0;
          transition: opacity 0.3s;
        }

        .notification.show {
          opacity: 1;
        }

        .stats-bar {
          background: linear-gradient(135deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05));
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 25px;
          color: white;
          text-align: center;
          backdrop-filter: blur(10px);
          border: 1px solid rgba(255,255,255,0.2);
        }

        .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
          gap: 15px;
        }

        .stat-item {
          background: rgba(255,255,255,0.1);
          border-radius: 15px;
          padding: 15px;
          transition: all 0.3s ease;
          border: 1px solid rgba(255,255,255,0.1);
        }

        .stat-item:hover {
          background: rgba(255,255,255,0.2);
          transform: translateY(-2px);
        }

        .stat-value {
          font-size: 1.8rem;
          font-weight: bold;
          margin-bottom: 5px;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .stat-label {
          font-size: 0.9rem;
          opacity: 0.9;
          font-weight: 500;
        }

        /* 积分获取区域 */
        .points-earning {
          background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 25px;
          color: white;
        }

        .points-title {
          font-size: 1.3rem;
          font-weight: bold;
          margin-bottom: 15px;
          text-align: center;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .points-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
          gap: 12px;
        }

        .point-task {
          background: rgba(255,255,255,0.2);
          border-radius: 15px;
          padding: 15px;
          text-align: center;
          cursor: pointer;
          transition: all 0.3s ease;
          border: 2px solid transparent;
          backdrop-filter: blur(5px);
        }

        .point-task:hover {
          background: rgba(255,255,255,0.3);
          transform: scale(1.05);
          border-color: rgba(255,255,255,0.5);
        }

        .point-task:active {
          transform: scale(0.95);
        }

        .point-task.completed {
          background: rgba(76, 175, 80, 0.3);
          border-color: rgba(76, 175, 80, 0.5);
        }

        .point-icon {
          font-size: 2rem;
          margin-bottom: 8px;
        }

        .point-amount {
          font-size: 1.1rem;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .point-desc {
          font-size: 0.8rem;
          opacity: 0.9;
        }

        /* 成就系统 */
        .achievements {
          background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 25px;
          color: white;
        }

        .achievements-title {
          font-size: 1.3rem;
          font-weight: bold;
          margin-bottom: 15px;
          text-align: center;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .achievements-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
          gap: 10px;
        }

        .achievement {
          background: rgba(255,255,255,0.2);
          border-radius: 12px;
          padding: 12px;
          text-align: center;
          transition: all 0.3s ease;
          border: 2px solid transparent;
        }

        .achievement:hover {
          background: rgba(255,255,255,0.3);
          transform: scale(1.05);
        }

        .achievement.unlocked {
          background: rgba(255, 215, 0, 0.3);
          border-color: rgba(255, 215, 0, 0.5);
          animation: achievementGlow 2s ease-in-out infinite alternate;
        }

        @keyframes achievementGlow {
          0% { box-shadow: 0 0 10px rgba(255, 215, 0, 0.3); }
          100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.6); }
        }

        .achievement-icon {
          font-size: 1.8rem;
          margin-bottom: 5px;
        }

        .achievement-name {
          font-size: 0.8rem;
          font-weight: 500;
        }

        /* 每日签到 */
        .daily-checkin {
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          border-radius: 20px;
          padding: 20px;
          margin-bottom: 25px;
          color: white;
          text-align: center;
        }

        .checkin-title {
          font-size: 1.3rem;
          font-weight: bold;
          margin-bottom: 15px;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .checkin-grid {
          display: grid;
          grid-template-columns: repeat(7, 1fr);
          gap: 8px;
          margin-bottom: 15px;
        }

        .checkin-day {
          background: rgba(255,255,255,0.2);
          border-radius: 10px;
          padding: 10px 5px;
          font-size: 0.9rem;
          transition: all 0.3s ease;
          border: 2px solid transparent;
        }

        .checkin-day.checked {
          background: rgba(76, 175, 80, 0.3);
          border-color: rgba(76, 175, 80, 0.5);
          animation: checkinPulse 1s ease-in-out;
        }

        @keyframes checkinPulse {
          0% { transform: scale(1); }
          50% { transform: scale(1.1); }
          100% { transform: scale(1); }
        }

        .checkin-btn {
          background: rgba(255,255,255,0.2);
          border: none;
          color: white;
          padding: 12px 30px;
          border-radius: 25px;
          font-size: 1rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.3s ease;
          backdrop-filter: blur(10px);
        }

        .checkin-btn:hover {
          background: rgba(255,255,255,0.3);
          transform: scale(1.05);
        }

        .checkin-btn:disabled {
          opacity: 0.5;
          cursor: not-allowed;
        }

        @media (max-width: 768px) {
          .container {
            padding: 15px;
          }

          .header h1 {
            font-size: 2rem;
          }

          .feature-tabs {
            flex-direction: column;
            align-items: center;
          }

          .collection-grid {
            grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          }

          .gallery-viewer {
            height: 300px;
          }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="header">
        <h1>🏛️ 奇物收藏馆</h1>
        <p>图鉴养成系统 · 生态沙盒 · 盲盒图鉴 · 3D藏宝阁</p>
    </div>

    <!-- 统计栏 -->
    <div class="stats-bar">
        <div class="stats-grid">
            <div class="stat-item">
                <div class="stat-value" id="totalItems">0</div>
                <div class="stat-label">总收藏</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="rareItems">0</div>
                <div class="stat-label">稀有物品</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="legendaryItems">0</div>
                <div class="stat-label">传说物品</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="userPoints">1000</div>
                <div class="stat-label">积分</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="userLevel">1</div>
                <div class="stat-label">等级</div>
            </div>
            <div class="stat-item">
                <div class="stat-value" id="achievementCount">0</div>
                <div class="stat-label">成就</div>
            </div>
        </div>
    </div>

    <!-- 每日签到 -->
    <div class="daily-checkin">
        <div class="checkin-title">📅 每日签到</div>
        <div class="checkin-grid" id="checkinGrid">
            <div class="checkin-day">周一</div>
            <div class="checkin-day">周二</div>
            <div class="checkin-day">周三</div>
            <div class="checkin-day">周四</div>
            <div class="checkin-day">周五</div>
            <div class="checkin-day">周六</div>
            <div class="checkin-day">周日</div>
        </div>
        <button class="checkin-btn" id="checkinBtn" onclick="dailyCheckin()">🎁 今日签到</button>
    </div>

    <!-- 积分获取 -->
    <div class="points-earning">
        <div class="points-title">💰 积分获取</div>
        <div class="points-grid" id="pointsGrid">
            <!-- 积分任务将在这里动态生成 -->
        </div>
    </div>

    <!-- 成就系统 -->
    <div class="achievements">
        <div class="achievements-title">🏆 成就系统</div>
        <div class="achievements-grid" id="achievementsGrid">
            <!-- 成就将在这里动态生成 -->
        </div>
    </div>

    <!-- 功能标签页 -->
    <div class="feature-tabs">
        <button class="tab-btn active" onclick="switchTab('ecosystem')">🌱 生态沙盒</button>
        <button class="tab-btn" onclick="switchTab('gacha')">🎁 盲盒图鉴</button>
        <button class="tab-btn" onclick="switchTab('gallery')">🏛️ 3D藏宝阁</button>
    </div>

    <!-- 生态沙盒 -->
    <div id="ecosystem" class="tab-content active">
        <div class="card">
            <div class="card-title">
                🌱 生态沙盒
            </div>
            <div class="ecosystem-area">
                <div class="ecosystem-canvas" id="ecosystemCanvas">
                    <!-- 植物将在这里生成 -->
                </div>
                <div class="ecosystem-controls">
                    <button class="eco-btn" onclick="addElement('sun')" id="sunBtn">☀️ 阳光</button>
                    <button class="eco-btn" onclick="addElement('soil')" id="soilBtn">⛰️ 泥土</button>
                    <button class="eco-btn" onclick="addElement('seed')" id="seedBtn">🌱 种子</button>
                    <button class="eco-btn" onclick="addElement('water')" id="waterBtn">💧 水分</button>
                    <button class="eco-btn" onclick="addElement('fertilizer')" id="fertilizerBtn">🌿 肥料</button>
                    <button class="eco-btn" onclick="addElement('wind')" id="windBtn">🌪️ 风</button>
                    <button class="eco-btn" onclick="addElement('lightning')" id="lightningBtn">⚡ 闪电</button>
                    <button class="eco-btn" onclick="addElement('crystal')" id="crystalBtn">💎 水晶</button>
                    <button class="eco-btn" onclick="clearEcosystem()">🗑️ 清空</button>
                    <button class="eco-btn" onclick="autoEvolve()">🔄 自动演化</button>
                    <button class="eco-btn" onclick="triggerWeather()">🌤️ 天气变化</button>
                    <button class="eco-btn" onclick="createSpecialEcosystem()">🌟 特殊生态</button>
                </div>
                
                <!-- 生态信息面板 -->
                <div class="ecosystem-info">
                    <div class="ecosystem-stats">
                        <div class="eco-stat">
                            <div class="eco-stat-value" id="plantCount">0</div>
                            <div class="eco-stat-label">植物数量</div>
            </div>
                        <div class="eco-stat">
                            <div class="eco-stat-value" id="evolutionCount">0</div>
                            <div class="eco-stat-label">演化次数</div>
            </div>
                        <div class="eco-stat">
                            <div class="eco-stat-value" id="ecosystemLevel">1</div>
                            <div class="eco-stat-label">生态等级</div>
                        </div>
                        <div class="eco-stat">
                            <div class="eco-stat-value" id="weatherType">晴天</div>
                            <div class="eco-stat-label">当前天气</div>
                        </div>
                    </div>
                    
                    <!-- 进化链展示 -->
                    <div class="evolution-chain">
                        <div class="evolution-step">
                            <div class="evolution-icon" id="evo1">🌱</div>
                            <div class="evolution-arrow">→</div>
                        </div>
                        <div class="evolution-step">
                            <div class="evolution-icon" id="evo2">🌸</div>
                            <div class="evolution-arrow">→</div>
                        </div>
                        <div class="evolution-step">
                            <div class="evolution-icon" id="evo3">🌿</div>
                            <div class="evolution-arrow">→</div>
                        </div>
                        <div class="evolution-step">
                            <div class="evolution-icon" id="evo4">🌳</div>
                        </div>
                    </div>
                </div>
            </div>
            <div style="text-align: center; color: #666; font-size: 0.9rem; margin-top: 15px;">
                💡 提示：不同元素组合会产生不同植物，尝试各种组合发现隐藏形态！
            </div>
        </div>
    </div>

    <!-- 盲盒图鉴 -->
    <div id="gacha" class="tab-content">
        <div class="card">
            <div class="card-title">
                🎁 盲盒图鉴
            </div>
            <div class="gacha-area">
                <div class="gacha-machine" onclick="pullGacha()">
                    🎰
                </div>
                <div class="gacha-info">
                    <div class="gacha-cost">消耗积分：100</div>
                    <div class="gacha-probability">
                        普通 70% | 稀有 25% | 传说 5%
                    </div>
                </div>
            </div>
            <div class="collection-grid" id="collectionGrid">
                <!-- 收集的物品将在这里显示 -->
            </div>
        </div>
    </div>

    <!-- 3D藏宝阁 -->
    <div id="gallery" class="tab-content">
        <div class="card">
            <div class="card-title">
                🏛️ 3D藏宝阁
            </div>
            <div class="treasure-gallery">
                <div class="gallery-viewer">
                    <div class="gallery-stage" id="galleryStage">
                        <!-- 3D展示的物品 -->
                    </div>
                </div>
                <div class="gallery-controls">
                    <button class="gallery-btn" onclick="rotateGallery('left')">⬅️ 左转</button>
                    <button class="gallery-btn" onclick="playStory()">📖 播放故事</button>
                    <button class="gallery-btn" onclick="rotateGallery('right')">➡️ 右转</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 故事弹窗 -->
<div class="story-modal" id="storyModal">
    <div class="story-content">
        <button class="story-close" onclick="closeStory()">×</button>
        <div class="story-title" id="storyTitle">物品故事</div>
        <div class="story-text" id="storyText">这里将显示物品的背景故事...</div>
    </div>
</div>

<!-- 通知 -->
<div class="notification" id="notification"></div>

<script>
    // 全局变量
    let currentTab = 'ecosystem';
    let userPoints = 1000;
    let userLevel = 1;
    let userExp = 0;
    let collection = [];
    let currentGalleryIndex = 0;
    let ecosystemElements = [];
    let plantCount = 0;
    let evolutionCount = 0;
    let ecosystemLevel = 1;
    let currentWeather = 'sunny';
    let weatherEffects = [];
    let evolutionHistory = [];
    let buttonCooldowns = {};
    let checkinDays = [];
    let completedTasks = [];
    let unlockedAchievements = [];
    let taskProgress = {};

    // 积分任务数据
    const pointTasks = [
      { id: 'daily_checkin', icon: '📅', amount: 50, desc: '每日签到', type: 'daily' },
      { id: 'ecosystem_evolve', icon: '🌱', amount: 30, desc: '演化植物', type: 'action' },
      { id: 'gacha_pull', icon: '🎰', amount: 20, desc: '抽取盲盒', type: 'action' },
      { id: 'collect_rare', icon: '⭐', amount: 100, desc: '获得稀有物品', type: 'achievement' },
      { id: 'collect_legendary', icon: '👑', amount: 500, desc: '获得传说物品', type: 'achievement' },
      { id: 'complete_ecosystem', icon: '🌳', amount: 80, desc: '完成生态演化', type: 'action' },
      { id: 'view_story', icon: '📖', amount: 15, desc: '查看物品故事', type: 'action' },
      { id: 'rotate_gallery', icon: '🔄', amount: 10, desc: '旋转藏宝阁', type: 'action' }
    ];

    // 成就数据
    const achievements = [
      { id: 'first_collection', icon: '🎯', name: '初次收藏', desc: '获得第一个收藏品', condition: () => collection.length >= 1 },
      { id: 'rare_collector', icon: '⭐', name: '稀有收藏家', desc: '获得5个稀有物品', condition: () => collection.filter(i => i.rarity === 'rare').length >= 5 },
      { id: 'legendary_master', icon: '👑', name: '传说大师', desc: '获得3个传说物品', condition: () => collection.filter(i => i.rarity === 'legendary').length >= 3 },
      { id: 'ecosystem_expert', icon: '🌱', name: '生态专家', desc: '演化10次植物', condition: () => taskProgress.ecosystem_evolve >= 10 },
      { id: 'gacha_addict', icon: '🎰', name: '盲盒达人', desc: '抽取20次盲盒', condition: () => taskProgress.gacha_pull >= 20 },
      { id: 'story_reader', icon: '📖', name: '故事收集者', desc: '查看10个物品故事', condition: () => taskProgress.view_story >= 10 },
      { id: 'level_5', icon: '🏆', name: '初级收藏家', desc: '达到5级', condition: () => userLevel >= 5 },
      { id: 'level_10', icon: '🏆', name: '中级收藏家', desc: '达到10级', condition: () => userLevel >= 10 },
      { id: 'complete_collection', icon: '🎉', name: '收藏完成', desc: '收集所有物品', condition: () => collection.length >= Object.keys(itemsDatabase).length }
    ];

    // 物品数据库
    const itemsDatabase = {
      // 像素植物
      'pixel_flower': { name: '像素花', icon: '🌸', rarity: 'common', story: '一朵由像素构成的美丽花朵，在数字世界中绽放。它的花瓣会随着时间变化颜色，是数字花园中最常见的植物之一。' },
      'pixel_tree': { name: '像素树', icon: '🌳', rarity: 'common', story: '高大的像素树木，枝繁叶茂。它的叶子会发出微弱的光芒，为数字森林提供照明。' },
      'pixel_grass': { name: '像素草', icon: '🌱', rarity: 'common', story: '翠绿的像素草地，柔软如丝。踩在上面会发出悦耳的声音，是数字草原的基础植物。' },
      'pixel_cactus': { name: '像素仙人掌', icon: '🌵', rarity: 'rare', story: '沙漠中的像素仙人掌，具有独特的几何形状。它能在极端环境下生存，是坚韧的象征。' },
      'pixel_orchid': { name: '像素兰花', icon: '🌺', rarity: 'rare', story: '优雅的像素兰花，散发着淡淡的香气。它的花瓣呈现出复杂的几何图案，是艺术与自然的完美结合。' },
      'pixel_bamboo': { name: '像素竹子', icon: '🎋', rarity: 'rare', story: '挺拔的像素竹子，节节高升。它的竹叶会随风摆动，发出沙沙的声音，象征着坚韧不拔的精神。' },

      // 机械建筑
      'mech_tower': { name: '机械塔', icon: '🗼', rarity: 'common', story: '高耸的机械塔楼，由齿轮和管道构成。它的顶部会发出信号，是机械城市的地标建筑。' },
      'mech_bridge': { name: '机械桥', icon: '🌉', rarity: 'common', story: '横跨河流的机械桥梁，由钢铁和齿轮组成。它的结构精密，能够承受巨大的重量。' },
      'mech_factory': { name: '机械工厂', icon: '🏭', rarity: 'rare', story: '繁忙的机械工厂，烟囱中冒出蒸汽。这里生产着各种机械零件，是工业文明的象征。' },
      'mech_castle': { name: '机械城堡', icon: '🏰', rarity: 'rare', story: '宏伟的机械城堡，由齿轮和钢铁建造。它的城墙坚固，是机械王国的权力中心。' },
      'mech_lighthouse': { name: '机械灯塔', icon: '🗼', rarity: 'rare', story: '海岸边的机械灯塔，发出明亮的光芒。它为迷航的船只指引方向，是希望的象征。' },
      'mech_airship': { name: '机械飞艇', icon: '🚁', rarity: 'legendary', story: '翱翔天空的机械飞艇，由蒸汽驱动。它的设计精妙，能够在空中自由飞行，是科技与梦想的结合。' },
      'mech_robot': { name: '机械机器人', icon: '🤖', rarity: 'legendary', story: '智能的机械机器人，具有自主意识。它能够思考和学习，是人工智能的杰出代表。' },
      'mech_dragon': { name: '机械龙', icon: '🐉', rarity: 'legendary', story: '传说中的机械巨龙，由最先进的科技打造。它拥有强大的力量，是机械世界的守护者。' },

      // 特殊物品
      'crystal_flower': { name: '水晶花', icon: '💎', rarity: 'legendary', story: '由纯净水晶构成的花朵，散发着七彩光芒。它能够净化空气，是自然与魔法的完美融合。' },
      'time_machine': { name: '时光机', icon: '⏰', rarity: 'legendary', story: '神秘的时光机器，能够穿越时空。它的存在证明了时间旅行的可能性，是科幻与现实的桥梁。' },
      'dream_catcher': { name: '捕梦网', icon: '🕸️', rarity: 'rare', story: '美丽的捕梦网，能够捕捉美好的梦境。它由羽毛和珠子编织而成，是守护梦想的神奇物品。' }
    };

    // 切换标签页
    function switchTab(tabName) {
      // 隐藏所有标签页内容
      document.querySelectorAll('.tab-content').forEach(tab => {
        tab.classList.remove('active');
      });

      // 移除所有标签按钮的active状态
      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.classList.remove('active');
      });

      // 显示选中的标签页
      document.getElementById(tabName).classList.add('active');

      // 激活对应的按钮
      event.target.classList.add('active');

      currentTab = tabName;

      // 特殊处理
      if (tabName === 'gallery') {
        updateGallery();
      }
    }

    // 生态沙盒功能
    function addElement(type) {
      // 检查按钮冷却
      if (buttonCooldowns[type] && Date.now() - buttonCooldowns[type] < 1000) {
        showNotification('元素正在冷却中...');
        return;
      }
      buttonCooldowns[type] = Date.now();

      const canvas = document.getElementById('ecosystemCanvas');
      const element = document.createElement('div');
      element.className = 'plant';

      let icon, x, y, specialEffect = null;

      switch(type) {
        case 'sun':
          icon = '☀️';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = 20;
          specialEffect = 'sunshine';
          break;
        case 'soil':
          icon = '⛰️';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = canvas.offsetHeight - 60;
          break;
        case 'seed':
          icon = '🌱';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = canvas.offsetHeight - 80;
          break;
        case 'water':
          icon = '💧';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = Math.random() * (canvas.offsetHeight - 50);
          specialEffect = 'ripple';
          break;
        case 'fertilizer':
          icon = '🌿';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = Math.random() * (canvas.offsetHeight - 50);
          break;
        case 'wind':
          icon = '🌪️';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = Math.random() * (canvas.offsetHeight - 50);
          specialEffect = 'wind';
          break;
        case 'lightning':
          icon = '⚡';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = Math.random() * (canvas.offsetHeight - 50);
          specialEffect = 'lightning';
          break;
        case 'crystal':
          icon = '💎';
          x = Math.random() * (canvas.offsetWidth - 50);
          y = Math.random() * (canvas.offsetHeight - 50);
          specialEffect = 'sparkle';
          break;
      }

      element.textContent = icon;
      element.style.left = x + 'px';
      element.style.top = y + 'px';
      canvas.appendChild(element);

      // 添加特殊效果
      if (specialEffect) {
        addSpecialEffect(x, y, specialEffect);
      }

      ecosystemElements.push({ type, element });

      // 检查是否满足演化条件
      checkEvolution();

      showNotification(`添加了 ${icon}`);
      updateEcosystemStats();
    }

    function checkEvolution() {
      const hasSun = ecosystemElements.some(e => e.type === 'sun');
      const hasSoil = ecosystemElements.some(e => e.type === 'soil');
      const hasSeed = ecosystemElements.some(e => e.type === 'seed');
      const hasWater = ecosystemElements.some(e => e.type === 'water');
      const hasFertilizer = ecosystemElements.some(e => e.type === 'fertilizer');

      if (hasSun && hasSoil && hasSeed) {
        setTimeout(() => {
          evolvePlant(hasWater, hasFertilizer);
        }, 1000);
      }
    }

    function evolvePlant(hasWater, hasFertilizer) {
      const canvas = document.getElementById('ecosystemCanvas');
      const plant = document.createElement('div');
      plant.className = 'plant';

      // 检查特殊元素组合
      const hasWind = ecosystemElements.some(e => e.type === 'wind');
      const hasLightning = ecosystemElements.some(e => e.type === 'lightning');
      const hasCrystal = ecosystemElements.some(e => e.type === 'crystal');

      let plantType, plantName, specialEffect = null;

      // 特殊组合判断
      if (hasCrystal && hasLightning) {
        plantType = '🌌'; // 星云植物
        plantName = '星云植物';
        specialEffect = 'cosmic';
      } else if (hasWind && hasLightning) {
        plantType = '🌩️'; // 雷暴植物
        plantName = '雷暴植物';
        specialEffect = 'storm';
      } else if (hasCrystal && hasWater) {
        plantType = '💎'; // 水晶植物
        plantName = '水晶植物';
        specialEffect = 'crystal';
      } else if (hasWind && hasWater) {
        plantType = '🌊'; // 海浪植物
        plantName = '海浪植物';
        specialEffect = 'wave';
      } else if (hasWater && hasFertilizer) {
        plantType = '🌳'; // 大树
        plantName = '参天大树';
      } else if (hasWater) {
        plantType = '🌸'; // 花朵
        plantName = '美丽花朵';
      } else if (hasFertilizer) {
        plantType = '🌿'; // 灌木
        plantName = '茂密灌木';
      } else {
        plantType = '🌱'; // 小草
        plantName = '嫩绿小草';
      }

      plant.textContent = plantType;
      plant.style.left = (canvas.offsetWidth / 2 - 25) + 'px';
      plant.style.top = (canvas.offsetHeight / 2 - 25) + 'px';
      plant.style.fontSize = '3.5rem';
      canvas.appendChild(plant);

      // 添加特殊效果
      if (specialEffect) {
        addSpecialEffect(canvas.offsetWidth / 2, canvas.offsetHeight / 2, specialEffect);
      }

      // 记录演化历史
      evolutionHistory.push({
        type: plantType,
        name: plantName,
        elements: ecosystemElements.map(e => e.type),
        timestamp: new Date()
      });

      plantCount++;
      evolutionCount++;
      ecosystemLevel = Math.floor(evolutionCount / 5) + 1;

      // 增加任务进度和积分
      addTaskProgress('ecosystem_evolve', 1);
      addTaskProgress('complete_ecosystem', 1);
      addExp(30 + (specialEffect ? 20 : 0));

      updateEcosystemStats();
      updateEvolutionChain();

      showNotification(`植物演化完成！${plantName} +${30 + (specialEffect ? 20 : 0)}经验`);
    }

    // 特殊效果系统
    function addSpecialEffect(x, y, effectType) {
      const canvas = document.getElementById('ecosystemCanvas');
      
      switch(effectType) {
        case 'sunshine':
          for (let i = 0; i < 8; i++) {
            const ray = document.createElement('div');
            ray.style.position = 'absolute';
            ray.style.left = x + 'px';
            ray.style.top = y + 'px';
            ray.style.width = '2px';
            ray.style.height = '30px';
            ray.style.background = 'linear-gradient(to bottom, #ffd700, transparent)';
            ray.style.transform = `rotate(${i * 45}deg)`;
            ray.style.animation = 'sunshine 2s ease-out forwards';
            canvas.appendChild(ray);
            setTimeout(() => ray.remove(), 2000);
          }
          break;
          
        case 'ripple':
          for (let i = 0; i < 3; i++) {
            const ripple = document.createElement('div');
            ripple.style.position = 'absolute';
            ripple.style.left = (x - 20) + 'px';
            ripple.style.top = (y - 20) + 'px';
            ripple.style.width = '40px';
            ripple.style.height = '40px';
            ripple.style.border = '2px solid rgba(255,255,255,0.6)';
            ripple.style.borderRadius = '50%';
            ripple.style.animation = `ripple ${1 + i * 0.3}s ease-out forwards`;
            canvas.appendChild(ripple);
            setTimeout(() => ripple.remove(), 2000);
          }
          break;
          
        case 'wind':
          for (let i = 0; i < 5; i++) {
            const wind = document.createElement('div');
            wind.style.position = 'absolute';
            wind.style.left = (x + i * 20) + 'px';
            wind.style.top = y + 'px';
            wind.style.width = '20px';
            wind.style.height = '2px';
            wind.style.background = 'rgba(255,255,255,0.8)';
            wind.style.animation = `wind ${1.5 + i * 0.2}s ease-out forwards`;
            canvas.appendChild(wind);
            setTimeout(() => wind.remove(), 2000);
          }
          break;
          
        case 'lightning':
          const lightning = document.createElement('div');
          lightning.style.position = 'absolute';
          lightning.style.left = x + 'px';
          lightning.style.top = '0px';
          lightning.style.width = '3px';
          lightning.style.height = '400px';
          lightning.style.background = 'linear-gradient(to bottom, #ffff00, #ff6600)';
          lightning.style.animation = 'lightning 0.5s ease-out forwards';
          canvas.appendChild(lightning);
          setTimeout(() => lightning.remove(), 500);
          break;
          
        case 'sparkle':
          for (let i = 0; i < 6; i++) {
            const sparkle = document.createElement('div');
            sparkle.style.position = 'absolute';
            sparkle.style.left = (x + Math.cos(i * 60 * Math.PI / 180) * 30) + 'px';
            sparkle.style.top = (y + Math.sin(i * 60 * Math.PI / 180) * 30) + 'px';
            sparkle.style.width = '4px';
            sparkle.style.height = '4px';
            sparkle.style.background = '#00ffff';
            sparkle.style.borderRadius = '50%';
            sparkle.style.animation = `sparkle ${1 + i * 0.1}s ease-out forwards`;
            canvas.appendChild(sparkle);
            setTimeout(() => sparkle.remove(), 2000);
          }
          break;
          
        case 'cosmic':
          for (let i = 0; i < 12; i++) {
            const star = document.createElement('div');
            star.style.position = 'absolute';
            star.style.left = (x + Math.cos(i * 30 * Math.PI / 180) * 50) + 'px';
            star.style.top = (y + Math.sin(i * 30 * Math.PI / 180) * 50) + 'px';
            star.style.width = '3px';
            star.style.height = '3px';
            star.style.background = ['#ff00ff', '#00ffff', '#ffff00'][i % 3];
            star.style.borderRadius = '50%';
            star.style.animation = `cosmic ${2 + i * 0.1}s ease-out forwards`;
            canvas.appendChild(star);
            setTimeout(() => star.remove(), 3000);
          }
          break;
          
        case 'storm':
          for (let i = 0; i < 8; i++) {
            const bolt = document.createElement('div');
            bolt.style.position = 'absolute';
            bolt.style.left = (x + i * 15) + 'px';
            bolt.style.top = y + 'px';
            bolt.style.width = '2px';
            bolt.style.height = '20px';
            bolt.style.background = '#ffff00';
            bolt.style.animation = `storm ${0.8 + i * 0.1}s ease-out forwards`;
            canvas.appendChild(bolt);
            setTimeout(() => bolt.remove(), 1500);
          }
          break;
          
        case 'crystal':
          for (let i = 0; i < 4; i++) {
            const crystal = document.createElement('div');
            crystal.style.position = 'absolute';
            crystal.style.left = (x + i * 20) + 'px';
            crystal.style.top = (y + i * 20) + 'px';
            crystal.style.width = '10px';
            crystal.style.height = '10px';
            crystal.style.background = 'linear-gradient(45deg, #00ffff, #ff00ff)';
            crystal.style.animation = `crystal ${1.5 + i * 0.2}s ease-out forwards`;
            canvas.appendChild(crystal);
            setTimeout(() => crystal.remove(), 2500);
          }
          break;
          
        case 'wave':
          for (let i = 0; i < 3; i++) {
            const wave = document.createElement('div');
            wave.style.position = 'absolute';
            wave.style.left = (x - 30) + 'px';
            wave.style.top = (y + i * 15) + 'px';
            wave.style.width = '60px';
            wave.style.height = '8px';
            wave.style.background = 'rgba(0,255,255,0.6)';
            wave.style.borderRadius = '4px';
            wave.style.animation = `wave ${1.2 + i * 0.3}s ease-out forwards`;
            canvas.appendChild(wave);
            setTimeout(() => wave.remove(), 2000);
          }
          break;
      }
    }

    // 天气系统
    function triggerWeather() {
      const weathers = ['sunny', 'rainy', 'snowy', 'stormy', 'foggy'];
      const weatherNames = ['晴天', '雨天', '雪天', '暴风雨', '雾天'];
      const weatherIcons = ['☀️', '🌧️', '❄️', '⛈️', '🌫️'];
      
      const randomIndex = Math.floor(Math.random() * weathers.length);
      currentWeather = weathers[randomIndex];
      
      // 清除现有天气效果
      weatherEffects.forEach(effect => effect.remove());
      weatherEffects = [];
      
      // 添加新天气效果
      const canvas = document.getElementById('ecosystemCanvas');
      
      switch(currentWeather) {
        case 'rainy':
          for (let i = 0; i < 20; i++) {
            const rain = document.createElement('div');
            rain.className = 'rain';
            rain.style.left = Math.random() * canvas.offsetWidth + 'px';
            rain.style.animationDelay = Math.random() * 2 + 's';
            canvas.appendChild(rain);
            weatherEffects.push(rain);
          }
          break;
          
        case 'snowy':
          for (let i = 0; i < 15; i++) {
            const snow = document.createElement('div');
            snow.className = 'snow';
            snow.style.left = Math.random() * canvas.offsetWidth + 'px';
            snow.style.animationDelay = Math.random() * 3 + 's';
            canvas.appendChild(snow);
            weatherEffects.push(snow);
          }
          break;
          
        case 'stormy':
          for (let i = 0; i < 10; i++) {
            const lightning = document.createElement('div');
            lightning.style.position = 'absolute';
            lightning.style.left = Math.random() * canvas.offsetWidth + 'px';
            lightning.style.top = '0px';
            lightning.style.width = '2px';
            lightning.style.height = '400px';
            lightning.style.background = 'linear-gradient(to bottom, #ffff00, #ff6600)';
            lightning.style.animation = 'lightning 0.3s ease-out';
            lightning.style.animationDelay = Math.random() * 5 + 's';
            canvas.appendChild(lightning);
            weatherEffects.push(lightning);
          }
          break;
      }
      
      document.getElementById('weatherType').textContent = weatherNames[randomIndex];
      showNotification(`天气变化：${weatherIcons[randomIndex]} ${weatherNames[randomIndex]}`);
    }

    // 特殊生态创建
    function createSpecialEcosystem() {
      clearEcosystem();
      
      const specialCombos = [
        ['sun', 'crystal', 'lightning'],
        ['water', 'wind', 'crystal'],
        ['soil', 'fertilizer', 'crystal'],
        ['sun', 'wind', 'lightning'],
        ['water', 'fertilizer', 'wind']
      ];
      
      const combo = specialCombos[Math.floor(Math.random() * specialCombos.length)];
      
      combo.forEach((element, index) => {
        setTimeout(() => {
          addElement(element);
        }, index * 800);
      });
      
      showNotification('🌟 创建特殊生态组合！');
    }

    // 更新生态统计
    function updateEcosystemStats() {
      document.getElementById('plantCount').textContent = plantCount;
      document.getElementById('evolutionCount').textContent = evolutionCount;
      document.getElementById('ecosystemLevel').textContent = ecosystemLevel;
    }

    // 更新进化链
    function updateEvolutionChain() {
      const evoIcons = ['evo1', 'evo2', 'evo3', 'evo4'];
      const recentPlants = evolutionHistory.slice(-4);
      
      evoIcons.forEach((id, index) => {
        const icon = document.getElementById(id);
        if (recentPlants[index]) {
          icon.textContent = recentPlants[index].type;
          icon.classList.add('completed');
        } else {
          icon.classList.remove('completed');
        }
      });
    }

    // 清空生态
    function clearEcosystem() {
      const canvas = document.getElementById('ecosystemCanvas');
      canvas.innerHTML = '';
      ecosystemElements = [];
      weatherEffects.forEach(effect => effect.remove());
      weatherEffects = [];
      currentWeather = 'sunny';
      document.getElementById('weatherType').textContent = '晴天';
      showNotification('生态沙盒已清空');
      updateEcosystemStats();
      // 重新添加装饰元素
      addEcosystemDecorations();
    }

    // 添加生态缸装饰元素
    function addEcosystemDecorations() {
      const canvas = document.getElementById('ecosystemCanvas');
      
      // 添加鹅卵石
      for (let i = 0; i < 8; i++) {
        const pebble = document.createElement('div');
        pebble.className = 'decoration pebble';
        pebble.style.left = (Math.random() * (canvas.offsetWidth - 20)) + 'px';
        pebble.style.bottom = (10 + Math.random() * 20) + 'px';
        canvas.appendChild(pebble);
      }
      
      // 添加水藻
      for (let i = 0; i < 12; i++) {
        const algae = document.createElement('div');
        algae.className = 'decoration algae';
        algae.style.left = (Math.random() * (canvas.offsetWidth - 10)) + 'px';
        algae.style.height = (15 + Math.random() * 15) + 'px';
        canvas.appendChild(algae);
      }
      
      // 添加持续上升的气泡
      setInterval(() => {
        if (canvas.children.length < 50) { // 限制气泡数量
          const bubble = document.createElement('div');
          bubble.className = 'decoration bubble';
          bubble.style.left = (Math.random() * (canvas.offsetWidth - 10)) + 'px';
          bubble.style.animationDelay = Math.random() * 2 + 's';
          canvas.appendChild(bubble);
          
          // 气泡到达顶部后移除
          setTimeout(() => {
            if (bubble.parentNode) {
              bubble.remove();
            }
          }, 3000);
        }
      }, 2000);
    }

    // 自动演化增强版
    function autoEvolve() {
      clearEcosystem();
      const elements = ['sun', 'soil', 'seed', 'water', 'fertilizer', 'wind', 'lightning', 'crystal'];
      const selectedElements = [];
      
      // 随机选择3-5个元素
      const count = Math.floor(Math.random() * 3) + 3;
      for (let i = 0; i < count; i++) {
        const element = elements[Math.floor(Math.random() * elements.length)];
        if (!selectedElements.includes(element)) {
          selectedElements.push(element);
        }
      }
      
      selectedElements.forEach((element, index) => {
        setTimeout(() => {
          addElement(element);
        }, index * 1000);
      });
      
      showNotification(`🔄 自动演化：${selectedElements.length}个元素组合`);
    }

    // 盲盒图鉴功能
    function pullGacha() {
      if (userPoints < 100) {
        showNotification('积分不足！需要100积分');
        return;
      }

      userPoints -= 100;
      updateStats();

      // 概率计算
      const rand = Math.random();
      let rarity, itemKey;

      if (rand < 0.05) {
        rarity = 'legendary';
        itemKey = getRandomItemByRarity('legendary');
      } else if (rand < 0.30) {
        rarity = 'rare';
        itemKey = getRandomItemByRarity('rare');
      } else {
        rarity = 'common';
        itemKey = getRandomItemByRarity('common');
      }

      const item = itemsDatabase[itemKey];
      
      // 添加到收藏
      if (!collection.find(c => c.key === itemKey)) {
        collection.push({
          key: itemKey,
          name: item.name,
          icon: item.icon,
          rarity: item.rarity,
          story: item.story,
          obtainedAt: new Date()
        });
      }

      updateCollectionGrid();
      updateGallery();

      // 动画效果
      const machine = document.querySelector('.gacha-machine');
      machine.style.transform = 'scale(0.9)';
      setTimeout(() => {
        machine.style.transform = 'scale(1)';
      }, 200);

      showNotification(`获得 ${item.icon} ${item.name}！(${rarity})`);
      
      // 增加任务进度
      addTaskProgress('gacha_pull', 1);
      if (rarity === 'rare') {
        addTaskProgress('collect_rare', 1);
      } else if (rarity === 'legendary') {
        addTaskProgress('collect_legendary', 1);
      }
    }

    function getRandomItemByRarity(rarity) {
      const items = Object.keys(itemsDatabase).filter(key => 
        itemsDatabase[key].rarity === rarity
      );
      return items[Math.floor(Math.random() * items.length)];
    }

    function updateCollectionGrid() {
      const grid = document.getElementById('collectionGrid');
      grid.innerHTML = '';

      collection.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = `collection-item ${item.rarity}`;
        itemDiv.onclick = () => showItemDetail(item);

        itemDiv.innerHTML = `
          <div class="collection-icon">${item.icon}</div>
          <div class="collection-name">${item.name}</div>
          <div class="collection-rarity">${item.rarity}</div>
        `;

        grid.appendChild(itemDiv);
      });
    }

    function showItemDetail(item) {
      document.getElementById('storyTitle').textContent = item.name;
      document.getElementById('storyText').textContent = item.story;
      document.getElementById('storyModal').style.display = 'flex';
      
      // 增加任务进度
      addTaskProgress('view_story', 1);
    }

    // 3D藏宝阁功能
    function updateGallery() {
      const stage = document.getElementById('galleryStage');
      stage.innerHTML = '';

      if (collection.length === 0) {
        stage.innerHTML = '<div style="color: white; text-align: center; padding: 50px;">暂无收藏物品</div>';
        return;
      }

      collection.forEach((item, index) => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'gallery-item';
        itemDiv.style.transform = `translate(-50%, -50%) rotateY(${index * 360 / collection.length}deg) translateZ(200px)`;

        itemDiv.innerHTML = `
          <div class="gallery-icon">${item.icon}</div>
          <div class="gallery-name">${item.name}</div>
          <div class="gallery-desc">${item.rarity}</div>
        `;

        itemDiv.onclick = () => showItemDetail(item);
        stage.appendChild(itemDiv);
      });
    }

    function rotateGallery(direction) {
      const stage = document.getElementById('galleryStage');
      const currentRotation = getComputedStyle(stage).transform;
      let currentAngle = 0;

      if (currentRotation !== 'none') {
        const matrix = new DOMMatrix(currentRotation);
        currentAngle = Math.atan2(matrix.m32, matrix.m33) * (180 / Math.PI);
      }

      const rotationAmount = direction === 'left' ? -45 : 45;
      const newAngle = currentAngle + rotationAmount;

      stage.style.transform = `rotateY(${newAngle}deg)`;
    }

    function playStory() {
      if (collection.length === 0) {
        showNotification('暂无收藏物品');
        return;
      }

      const currentItem = collection[currentGalleryIndex];
      showItemDetail(currentItem);
    }

    function closeStory() {
      document.getElementById('storyModal').style.display = 'none';
    }

    // 统计更新
    function updateStats() {
      const totalItems = collection.length;
      const rareItems = collection.filter(item => item.rarity === 'rare').length;
      const legendaryItems = collection.filter(item => item.rarity === 'legendary').length;

      document.getElementById('totalItems').textContent = totalItems;
      document.getElementById('rareItems').textContent = rareItems;
      document.getElementById('legendaryItems').textContent = legendaryItems;
      document.getElementById('userPoints').textContent = userPoints;
    }

    // 通知功能
    function showNotification(message) {
      const notification = document.getElementById('notification');
      notification.textContent = message;
      notification.classList.add('show');

      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }

    // 经验与等级
    function addExp(amount) {
      userExp += amount;
      let need = 100 + (userLevel - 1) * 50;
      while (userExp >= need) {
        userExp -= need;
        userLevel++;
        showNotification(`🎉 恭喜升级！当前等级：${userLevel}`);
        updateStats();
      }
      updateStats();
    }

    // 任务进度与积分
    function addTaskProgress(taskId, count) {
      if (!taskProgress[taskId]) taskProgress[taskId] = 0;
      taskProgress[taskId] += count;
      // 完成任务奖励
      const task = pointTasks.find(t => t.id === taskId);
      if (task && !completedTasks.includes(taskId)) {
        userPoints += task.amount;
        showNotification(`+${task.amount}积分：${task.desc}`);
        completedTasks.push(taskId);
        updateStats();
        renderPointTasks();
      }
      checkAchievements();
    }

    // 渲染积分任务
    function renderPointTasks() {
      const grid = document.getElementById('pointsGrid');
      grid.innerHTML = '';
      pointTasks.forEach(task => {
        const div = document.createElement('div');
        div.className = 'point-task' + (completedTasks.includes(task.id) ? ' completed' : '');
        div.innerHTML = `<div class='point-icon'>${task.icon}</div><div class='point-amount'>+${task.amount}</div><div class='point-desc'>${task.desc}</div>`;
        if (!completedTasks.includes(task.id)) {
          div.onclick = () => {
            addTaskProgress(task.id, 1);
          };
        }
        grid.appendChild(div);
      });
    }

    // 成就系统
    function checkAchievements() {
      let unlocked = 0;
      achievements.forEach(ach => {
        if (ach.condition() && !unlockedAchievements.includes(ach.id)) {
          unlockedAchievements.push(ach.id);
          userPoints += 200;
          showNotification(`🏆 解锁成就：${ach.name} +200积分`);
        }
        if (unlockedAchievements.includes(ach.id)) unlocked++;
      });
      document.getElementById('achievementCount').textContent = unlocked;
      renderAchievements();
      updateStats();
    }
    function renderAchievements() {
      const grid = document.getElementById('achievementsGrid');
      grid.innerHTML = '';
      achievements.forEach(ach => {
        const unlocked = unlockedAchievements.includes(ach.id);
        const div = document.createElement('div');
        div.className = 'achievement' + (unlocked ? ' unlocked' : '');
        div.innerHTML = `<div class='achievement-icon'>${ach.icon}</div><div class='achievement-name'>${ach.name}</div>`;
        div.title = ach.desc;
        grid.appendChild(div);
      });
    }

    // 每日签到
    function dailyCheckin() {
      const today = new Date().getDay();
      if (checkinDays.includes(today)) {
        showNotification('今日已签到！');
        return;
      }
      checkinDays.push(today);
      userPoints += 50;
      addTaskProgress('daily_checkin', 1);
      showNotification('签到成功！+50积分');
      renderCheckin();
      updateStats();
    }
    function renderCheckin() {
      const days = ['周日','周一','周二','周三','周四','周五','周六'];
      const grid = document.getElementById('checkinGrid');
      Array.from(grid.children).forEach((el, idx) => {
        el.className = 'checkin-day' + (checkinDays.includes(idx) ? ' checked' : '');
      });
      document.getElementById('checkinBtn').disabled = checkinDays.includes(new Date().getDay());
    }

    // 旋转藏宝阁任务
    const oldRotateGallery = rotateGallery;
    rotateGallery = function(direction) {
      oldRotateGallery(direction);
      addTaskProgress('rotate_gallery', 1);
    }

    // 初始化
    document.addEventListener('DOMContentLoaded', function() {
      updateStats();
      updateCollectionGrid();
      updateGallery();
      renderPointTasks();
      renderAchievements();
      renderCheckin();
      updateEcosystemStats();
      updateEvolutionChain();
      addEcosystemDecorations();
      // 点击空白处关闭故事弹窗
      document.getElementById('storyModal').addEventListener('click', function(e) {
        if (e.target === this) {
          closeStory();
        }
      });

      // 键盘快捷键
      document.addEventListener('keydown', function(e) {
        switch(e.key) {
          case '1':
            switchTab('ecosystem');
            break;
          case '2':
            switchTab('gacha');
            break;
          case '3':
            switchTab('gallery');
            break;
          case ' ':
            if (currentTab === 'gacha') {
              e.preventDefault();
              pullGacha();
            }
            break;
          case 'ArrowLeft':
            if (currentTab === 'gallery') {
              rotateGallery('left');
            }
            break;
          case 'ArrowRight':
            if (currentTab === 'gallery') {
              rotateGallery('right');
            }
            break;
        }
      });
    });
  </script>
</body>
</html>